import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { passportActions } from 'reduxs'
import { showTeam, getPageFlag, validRule } from 'services/utils'
import { Form, Input, Divider, Button, Alert, message } from 'antd'
import QueueAnim from 'rc-queue-anim'
import 'styles/account.scss'

const FormItem = Form.Item
const accessFlag = getPageFlag('/account/baseinfo', 'access')

@connect(
  state => ({
    editInfoPending  : state.Passport.editInfoPending,
    editInfoError    : state.Passport.editInfoError,
    editInfoMessage  : state.Passport.editInfoMessage,
    rules            : state.Passport.rules,
    auth             : state.Passport.auth,
    teams            : state.Passport.teams
  }),
  dispatch => ({
    actions: bindActionCreators({ ...passportActions }, dispatch)
  })
)
@Form.create()
export default class BaseInfo extends PureComponent {

  state = {
    alert: null
  }

  componentWillReceiveProps (nextProps) {
    const { editInfoError, editInfoMessage } = nextProps
    if (editInfoError !== this.props.editInfoError) {
      editInfoError === 0 && message.success('您的信息已经更新成功')
      editInfoError > 0 && this.setState({ alert: (
        <Alert
          style={{ margin: '0 40px 24px 40px', width: 600 }}
          message={editInfoMessage}
          type="error"
          showIcon
          key="aaa"
        />
      )})
    }
  }

  render () {
    const { location, auth, teams, form, rules, editInfoPending } = this.props
    const { getFieldDecorator } = form
    const options = {
      location,
      pageCode: accessFlag.value,
      breadcrumb: [
        { name: '主页', link: '/' },
        { name: '个人中心' },
        { name: '基本资料' }
      ],
    }
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    }
    return (
      <CoreLayout {...options}>
        <Form 
          //ref={ view => this._Form = view }
          className="account-form"
          layout="horizontal" 
          onSubmit={this.handleSubmit}
          >
          {editInfoPending ? null : (
            <QueueAnim component="div" type={['bottom', 'top']} leaveReverse>
              {this.state.alert ? this.state.alert : null}
            </QueueAnim>
          )}
          <FormItem 
            {...formItemLayout} 
            label="用户名" 
            >
            <Input value={auth.username} disabled />
          </FormItem>
          <FormItem 
            {...formItemLayout} 
            label="用户组" 
            >
            <Input value={auth.group.name} disabled />
          </FormItem>
          <FormItem 
            {...formItemLayout} 
            label="团队" 
            >
            <Input value={showTeam(auth.group.team, teams)} disabled />
          </FormItem>
          <Divider dashed />
          <FormItem 
            {...formItemLayout} 
            label="昵称" 
            >
            {getFieldDecorator('nickname', {
              rules: [
                { validator: this.checkNickname.bind(this, rules['nickname']), message: '昵称格式错误' }
              ],
              initialValue: auth.nickname || ''
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            wrapperCol={{ span: 16, offset: 6 }}
            >
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={editInfoPending}
              >
              保存
            </Button>
          </FormItem>
        </Form>
      </CoreLayout>
    )
  }

  handleSubmit = (e) => {
    e && e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.actions.editInfo(values)
      }
    })
  }

  checkNickname (Rule, rule, value, callback) {
    let validByValue = validRule(Rule, value)
    if (value && !validByValue.valid) {
      callback(rule.message || validByValue.message || '昵称格式错误')
    }
    callback()
  }
}